<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>缴费</title>
  <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
  <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
  <link rel="stylesheet" href="../../css/public.css" media="all">
  <style>
    #dataFrm{
      margin: -75px 0px 0px 500px;
    }
    .dataFrm_input{
      font-size: 16px;
      width: 150px;
      height: 20px;
      margin-right: 20px;
      margin-bottom: 8px;
    }
    .dataFrm_td{
      display: block;
      width: 80px;
      text-align: right;
    }
    #add{
      margin: 0px;
    }
    #addPay{
      width:200px;
      font-size: 16px;
      width: 150px;
      height: 30px;
      margin-right: 20px;
    }
  </style>
</head>
<body>
<!-- 搜索条件开始 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>查询条件</legend>
</fieldset>
<form class="layui-form" method="post" id="searchFrm">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">住院号:</label>
      <div class="layui-input-inline">
        <input type="number" id="shows" lay-verify="required|number" autocomplete="off" class="layui-input" style="width:200px" >
      </div>
    </div>
    <div class="layui-inline" style="position: absolute;left: 340px;top:66px;">
      <div class="layui-input-inline">
        <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search" id="doSearch">查询</button>
      </div>
    </div>
  </div>
</form>
<form class="layui-form"  lay-filter="dataFrm" id="dataFrm">
  <input type="hidden" id="show" name="registerid">
  <input type="hidden" id="hidden" name="moneys" value="0">
  <table>
    <tr>
      <td class="dataFrm_td">姓名：</td>
      <td><input type="text" id="ceshi" class="dataFrm_input" name="userName" readonly></td>
      <td class="dataFrm_td">科室：</td>
      <td><input type="text" class="dataFrm_input" name="department" readonly></td>
      <td class="dataFrm_td">金额：</td>
      <td><input type="text" class="dataFrm_input" name="money" readonly></td>
    </tr>
    <tr>
      <td class="dataFrm_td">性别：</td>
      <td><input type="text" class="dataFrm_input" name="sex" readonly></td>
      <td class="dataFrm_td">医生：</td>
      <td><input type="text" class="dataFrm_input" name="doctorName" readonly></td>
      <td class="dataFrm_td">已用：</td>
      <td><input type="text" class="dataFrm_input" id="yong" readonly></td>
    </tr>
    <tr>
      <td class="dataFrm_td">年龄：</td>
      <td><input type="text" class="dataFrm_input" name="age" readonly></td>
      <td class="dataFrm_td">床位：</td>
      <td><input type="text" class="dataFrm_input" name="bedName" readonly></td>
      <td class="dataFrm_td">余款：</td>
      <td><input type="text" class="dataFrm_input" id="yu" readonly></td>
    </tr>
  </table>
</form>
<!-- 数据表格开始 -->
<div  style="display: none;" id="ToolBar">
  <input type="number" name="pay" id="addPay" lay-verify="required|number" autocomplete="off" lay-event="addPay" placeholder="请输入预交金额" class="pay" >
  <button type="button" class="layui-btn layui-btn-sm" lay-event="add" id="add">预交</button>
</div>
<table class="layui-hide" id="pay" lay-filter="pay"></table>
<!-- 数据表格结束 -->
<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script type="text/javascript" >
  var tableIns;
  layui.use([ 'jquery', 'layer', 'form', 'table'  ], function() {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var table = layui.table;
    var laydate = layui.laydate;
    //渲染数据表格
    tableIns=table.render({
      elem: '#pay'   //渲染的目标对象
      ,url:'/web/liao/selPays' //数据接口
      ,title: '用户数据表'//数据导出来的标题
      ,toolbar:"#ToolBar"   //表格的工具条
      ,height:'full-200'
      ,page: 1  //是否启用分页, limits: [10, 20, 30]
      ,limits: [7, 20, 30]
      ,limit: 7//默认采用3
      ,cols: [[   //列表数据
        {field:'registerid', title:'住院号',align:'center',width:'25%'}
        ,{field:'userName', title:'姓名',align:'center',width:'25%'}
        ,{field:'money', title:'预交金额',align:'center',width:'25%'}
        ,{field:'payDate', title:'交款时间',templet: "<div>{{layui.util.toDateString(d.payDate, 'yyyy年MM月dd日 HH:mm:ss')}}</div>",align:'center',width:'25%'}
      ]]
    })
    //查询
    $("#doSearch").click(function(){
      if($("#shows").val()==""){
        layer.msg("请输入住院号！");
        $("#shows").select();
        return false;
      }else{
        $("#hidden").val(0);
        sel();
      }
    });
    //失焦事件
    $("#shows").blur(function(){
      $("#dataFrm")[0].reset();
      $("#show").val($(this).val());
      $("#hidden").val(0);
      tableIns.reload({
        url:"/web/liao/selPays"
      })
    });
    function sel(){
      var params=$("#dataFrm").serialize();
      $.ajax({
        url: '/web/liao/selPay',
        dataType: 'json',
        type: 'post',
        data:params,
        success: function (data) {
          if(data==""){
            layer.msg("请输入正确的住院号！");
            $("shows").select();
          }else{
            $.each(data, function (index, item) {
              for(var i in item){
                $("input[name="+i+"]").val(item[i])
              }
            });
            sels();
            var params=$("#dataFrm").serialize();
            tableIns.reload({
              url:"/web/liao/selPays?"+params
            })
          }
        }
      })
    }
    table.on("toolbar(pay)",function(obj){
      if(obj.event=='addPay'){
        $("#hidden").val(0);
        if($("#shows").val()==""){
          layer.msg("请输入住院号！");
          $("#shows").select();
          return false;
        }
        $(this).blur(function(){
          $("#hidden").val($(this).val());
        });
      }
      if(obj.event=='add') {
        if($("#shows").val()==""){
          layer.msg("请输入住院号！");
          $("#shows").select();
          return false;
        }
        if($("#ceshi").val()==""){
          layer.msg("请点击查询！");
          return false;
        }
        if($("#hidden").val()==""){
          layer.msg("请输入预交金额！");
          return false;
        }
        if($("#hidden").val()==0){
          layer.msg("请重新输入预交金额！");
          return false;
        }
        sel();
        $("#hidden").val(0);
      }
    })
    function sels(){
      var params=$("#dataFrm").serialize();
      //查询余额
      $.post("/web/liao/selSurplus",params,function(inp) {
        if(inp==""){
          $("#yong").val(0);
        }else{
          $.each(inp, function (index, item) {
            for(var i in item){
              if(i=="repicetotal"){
                $("#yong").val(item[i]);
              }
            }
          });
        }
        $("#yu").val($("input[name='money']").val()-$("#yong").val());
      })
    }
  });
</script>
</body>
</html>